{% extends 'base.html' %}
{% block head_block %}
    <title>第一个页面布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #root {
            display: flex;
            height: 100vh;
            width: 100vw;
            padding-top: 5%;
            padding-bottom: 2%;
            box-sizing: border-box;
        }

        #main_block {
            box-sizing: border-box;
            /* border: solid 1px #000000; */
            display: flex;
            width: 100%;
            /* 主轴水平排列 */
            flex-direction: row;
            /* 主轴水平平均分布 */
            justify-content: space-evenly;
            /* 交叉轴纵向拉伸：不行，否则标签滚动条就加不上了 */
            /* align-items: stretch; */
        }

        #main_block * {
            box-sizing: border-box;
            flex-shrink: 1;
            height: 95%;
        }

        #left_block, #right_block {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #left_block :first-child {
            height: 65%;
        }

        #left_block :last-child {
            height: 30%;
        }

        #left_block *, #right_block * {
            width: 100%;
            flex-shrink: 1;
            border: solid 1px rgba(84, 215, 255, 0.89);
            padding: 5px;
            background-color: #031a39;
        }

        #right_block {
            justify-content: space-between;
            border: solid 1px rgba(84, 215, 255, 0.89);
        }

        #right_block * {
            border: 0;
        }

        #right_block_d * {
            background-color: #02335a;
            border: solid 1px rgba(255, 255, 255, 0.89);
            margin-top: 10px;
        }

    </style>
{% endblock head_block %}

{% block body_block %}
    <div id="root" style="">
        <div id="main_block">
            <div id="left_block" style="width: 45%">
                <div id="left_block_u">

                </div>

                <div id="left_block_d">

                </div>
            </div>
            <div id="right_block" style="width: 45%">

            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#root',
        })
    </script>
{% endblock body_block %}